<!-- 个人中心-->
<template>
    <div class="Personal">
        <div>
            <titles :name="'基本信息'" />
        </div>
        <!-- <div class="Personal-content">
      <div class="per-form">
        <p>
          <span>用户名：</span>
          <span>{{ ruleForm.name }}</span>
        </p>
        <p>
          <span>性别：</span>
          <span>
            <el-radio v-model="ruleForm.radio" label="1">男</el-radio>
            <el-radio v-model="ruleForm.radio" label="2">女</el-radio>
          </span>
        </p>
        <p>
          <span>电话：</span>
          <span>
            {{ ruleForm.phone }}
          </span>
        </p>
        <p>
          <span>身份证：</span>
          <span>
            {{ ruleForm.code }}
          </span>
        </p>
        <p>
          <span>电子邮箱：</span>
          <span>
            {{ ruleForm.email }}
          </span>
        </p>
        <p>
          <span>家庭地址：</span>
          <span>
            {{ ruleForm.address }}
          </span>
        </p>
      </div>
      <div class="per-portrait">
        <img src="../../assets/face.png" alt="" />

      </div>
    </div> -->

        <div class="Personal-content">
            <el-row>
                <el-col :span="3">
                    <div class="grid-content">
                        <img src="@/assets/face.png" alt="" />
                        <!-- <p>
              <el-button >更换</el-button>
            </p> -->
                    </div>
                </el-col>
                <el-col :span="21">
                    <div class="bg-purple">
                        <p>
                            <span>用户名：</span>
                            <span>{{ ruleForm.name }}</span>
                        </p>
                        <p>
                            <span>性别：</span>
                            <span>
                                <el-radio v-model="ruleForm.radio" label="1">男</el-radio>
                                <el-radio v-model="ruleForm.radio" label="2">女</el-radio>
                            </span>
                        </p>
                        <p>
                            <span>电话：</span>
                            <span>
                                {{ ruleForm.phone }}
                            </span>
                        </p>
                        <p>
                            <span>身份证：</span>
                            <span>
                                {{ ruleForm.code }}
                            </span>
                        </p>
                        <p>
                            <span>电子邮箱：</span>
                            <span>
                                {{ ruleForm.email }}
                            </span>
                        </p>
                        <p>
                            <span>家庭地址：</span>
                            <span>
                                {{ ruleForm.address }}
                            </span>
                        </p>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import titles from "@/components/title"
export default {
    name: "",

    components: { titles },
    data() {
        return {
            ruleForm: {
                name: "张丽丽",
                radio: "2",
                phone: "177334567742",
                address: "河北石家庄",
                code: "130124199708876671",
                email: "165344553@qq.com",
            },
            rules: {
                name: [
                    { required: true, message: "请输入活动名称", trigger: "blur" },
                    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
                ],
                region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
                date1: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
                date2: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择时间",
                        trigger: "change",
                    },
                ],
                type: [
                    {
                        type: "array",
                        required: true,
                        message: "请至少选择一个活动性质",
                        trigger: "change",
                    },
                ],
                resource: [{ required: true, message: "请选择活动资源", trigger: "change" }],
                desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
            },
        }
    },

    computed: {},

    mounted() {},

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!")
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
}
</script>
<style lang='scss' scoped>
.Personal {
    // background: white;
}
.Personal-content {
    height: 700px;
    background: white;
    border: 1px solid #eee;
    margin: 20px;
    padding: 20px;
}
.bg-purple {
    padding: 30px 0 0 0px;
    float: left;
    width: 70%;
    margin: 0 10px;
    p {
        padding-bottom: 20px;
        border-bottom: 1px dashed rgb(184, 184, 184);
    }
    span {
        display: inline-block;
        color: rgb(53, 52, 52);
    }
    span:first-child {
        text-align: right;
        padding-right: 10px;
        width: 100px;
        color: rgb(187, 184, 184);
    }
}
.per-portrait {
    //   width: 150px;
    background: #eee;
    padding: 10px;
    float: left;
}
.el-input,
.el-select {
    width: 100%;
}
</style>
